Toggle navigation

Panel

Version 1.0.0

Thank you for purchasing this template. We covered almost everything in this document that how easily you can set up. If you have any questions that
are beyond the scope of this help file, please feel free to contact us.

Download and extract zip files. You will find basic development structure like this.

  • app
    • src
      • assets
      • partials
      • *.*_files.html
    • gulpfile.js
    • package.json

Paper is using partials folder to inject some common html files like header and
footer.

_head.html Basic HTML meta tags and everything that could be in <head></head>
_foot.html Body & wrapper close
_header.html Main Navigation or menu
_header.html Responsible for site pre header
_footer.html Footer of your site.
_script.html Responsible for all site scripts

Get started

You may need following things to get started. Please download and install
dependencies

  • To install Paper Knowlegebase please make sure you have installed node and gulp.
Download Node

 

  • You can use any software of your choice to edit HTML files or
Download VS Code

Installing gulp 4 globally

You will need to remove your current gulp global package before installing v4 in order to
do an upgrade.

Note: The $ shows the command is to be run on the
command line and shouldn’t be typed

$ npm rm -g gulp
$ npm install -g gulp-cli

This command removes your current global package and installs v4 from the gulp-cli 4.0
branch.

Make sure you don’t get any errors from the first command before you type the second.
Depending on your set-up, you may need to run them with sudo.

To verify what version you have installed globally, you can run the below command (and
should see a similar output)

$ gulp -v
CLI version 1.2.1

Paper Installtion

It’s time to open Paper  HTML app folder to your favorite editor. It’s easy to use an
editor which have terminal. Like VS Code or PhpStrom

First of all install all node modules by using this command:

$ npm install

 

After all node modules installation completed run

gulp watch

gulp watch will create a temporary folder with name of tmp

only change content in src folder tmp folder is just for preview.

NPM install failed?

Please make sure you have the latest version of gulp CLI. You will need to remove your current gulp global package before installing v4 in order to do an upgrade.

# Uninstall previous Gulp installation and related packages, if any
$ npm rm gulp -g
$ npm rm gulp-cli -g
$ cd [your-project-dir/]
$ npm rm gulp --save-dev
$ npm rm gulp --save
$ npm rm gulp --save-optional
$ npm cache clean

# Install the latest Gulp CLI tools globally
$ npm install gulpjs/gulp-cli -g

# Install Gulp 4 into your project from 4.0 GitHub branch as dev dependency
$ npm install gulpjs/gulp#4.0 --save-dev

# Check the versions installed. Make sure your versions are not lower than shown.
$ gulp -v
---
[10:48:35] CLI version 1.2.2
[10:48:35] Local version 4.0.0-alpha.2

After all changes you need to create production version of your product

$ gulp production

 

Creating Minified Version

If you want a minified version then run

$ gulp production-min

Above command will create a new folder “dist” it will be fully optimized. It will
compress and minify all of your html, css and js files. You can copy folder to your ftp
or framework to use it.

To change the color of any component section or element please add a color class.  For example to change a card color background add class blue. For all colors classes list please check

Extras > Colors

page in demo.

Paper development version has separate partials for RTL and a complete Dashboard1 RTL demo.

For RTL add dir="rtl" in html tag

<html lang="zxx" dir="rtl">

There are few other things you may need to change when using a normal element with RTL. Paper heavily using bootstrap4 helper classess. So you may have to reverse class name from left to right or right to left.

For example:

ml will become mr
mr will become ml
pl will become pr
pr will become pl
float-right will become float-left
float-left will become float-right

for RTL css check rtl.scss

If you are using version 1.5 or later you can use easy deploy option to upload all files
to your ftp server with just one commnand.Please make sure to run gulp watch first and make changes before you do this and you
have to add your server details to upload file. Please open ftp.config and add your
server details.

$ gulp deploy


To speed your site you may need to compress some of your images. For that run
command:

$ gulp img-compress

images in demo folder will be compressed only. you must first create production version.
you can change folder name in gulpfile.js if you want.

To make an item sticky add sticky class

<div class="sticky">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad architecto asperiores dolor ea exercitationem hic ipsam iusto maiores natus nulla numquam perspiciatis quasi quis recusandae, reiciendis rerum similique ut.
</div>


  • Bootstrap 4
  • Light Slider
  • CSS3
    Animations
  • Easy Pie Chart
  • Morris Charts
  • Char Js
  • Spark Lines
  • Echarts
  • Jqvmap
  • Data Tables
  • Tags Input
  • Select2
  • Range Slider
  • Color Picker
  • Date Time Picker
  • Toast
  • Stepper